<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:rich="http://richfaces.org/rich"
      xmlns:core="http://www.contact.core.com/contacts/core/ui"
      xmlns:a4j="http://richfaces.org/a4j"
        >

<ui:component>
    <style type="text/css">
        .imagePanel {
            background: #F7F7F7;
            border-top: 1px solid gray;
            border-bottom: 1px solid gray;

        }

        .top {
            vertical-align: top;
            text-align: center;
        }

        .bootomRight {
            vertical-align: bottom;
            float: right;
        }
    </style>
    <h:panelGrid style="width:100%">
        <a4j:outputPanel layout="block" style="width:100%; height:20px;">
            <a4j:outputPanel id="viewPictureNumber" layout="block" style="float:left;">
                <h:panelGrid columns="5">
                    <h:outputFormat style="color:gray"
                                    value="#{resources.photoOfText}">
                        <f:param value="#{imageSliderBean.currentPictureIndex}"/>
                        <f:param value="#{imageSliderBean.photosNumber}"/>
                    </h:outputFormat>
                    <h:outputLabel style="padding:2px; color:gray" value="|"/>
                    <a4j:commandLink value="#{resources.backToAlbumLabel}"
                                     reRender="photosProfileTabPanel">
                        <f:setPropertyActionListener value="viewPhotos"
                                                     target="#{photosSessionBean.pageViewKey}"/>
                    </a4j:commandLink>
                    <h:outputLabel style="padding:2px; color:gray" value="|"/>
                    <a4j:commandLink  reRender="leftContentProfilPanel, profileRightCenterPanel">
                        <f:setPropertyActionListener value="profileTabOne" target="#{profile.profileTab}"/>
                        <h:outputFormat value="#{resources.someProfileText}">
                            <f:param value="#{profileSessionBean.information.firstName}"/>
                        </h:outputFormat>
                    </a4j:commandLink>
                </h:panelGrid>

            </a4j:outputPanel>
            <a4j:outputPanel layout="block" style="float:right;">
                <h:panelGrid columns="2">
                    <a4j:commandLink value="#{resources.previousLabel}"
                                     action="#{imageSliderBean.previous}"
                                     reRender="imageSlider , viewPictureNumber "
                            />
                    <a4j:commandLink style="margin-left:2px" value="#{resources.nextLabel}"
                                     action="#{imageSliderBean.next}"
                                     reRender="imageSlider , viewPictureNumber "
                            />

                </h:panelGrid>
            </a4j:outputPanel>

        </a4j:outputPanel>

        <!--<rich:separator width="100%" height="1px"/>-->

        <rich:panel style="width:100%; border:none; min-height:400px; overflow:auto;"
                    bodyClass="rich-laguna-panel-no-header, imagePanel">

            <h:panelGrid columns="1" style="width:100%" rowClasses="top, bootomRight">
                <a4j:outputPanel id="imageSlider" onclick="nextPictureView();" layout="block"
                                 style="width:100%;">
                    <center>
                        <a4j:mediaOutput id="dd"
                                         style="margin-top:10px; margin-bottom:10px; max-width:580px; max-height:800px; resize:both;"
                                         createContent="#{imageSliderBean.paint}"
                                         element="img"
                                         session="false"
                                         cacheable="false"
                                         mimeType="#{imageSliderSessionBean.currPicture.mimeType}">
                            <f:param value="#{imageSliderBean.timeStamp}" name="time"/>
                        </a4j:mediaOutput>
                    </center>
                    <a4j:jsFunction name="nextPictureView"
                                    action="#{imageSliderBean.previous}"
                                    reRender="imageSlider , viewPictureNumber "/>
                </a4j:outputPanel>

                <a4j:outputPanel id="imageSliderDescribe" layout="block"
                                 style="float:right; border-left:1px solid #cccccc;">
                    <h:panelGrid columns="1">
                        <h:outputLabel value="From the Album"/>
                        <h:panelGrid columns="3">
                            <a4j:commandLink value="Profile"
                                             reRender="photosProfileTabPanel">
                                <f:setPropertyActionListener value="viewPhotos"
                                                             target="#{photosSessionBean.pageViewKey}"/>
                            </a4j:commandLink>
                            <h:outputLabel value="by"/>
                            <a4j:commandLink value="Petar Popovic"
                                             reRender="leftContentProfilPanel, profileRightCenterPanel">
                                <f:setPropertyActionListener value="profileTabOne" target="#{profile.profileTab}"/>
                            </a4j:commandLink>
                        </h:panelGrid>

                    </h:panelGrid>

                </a4j:outputPanel>
            </h:panelGrid>


            <!--<a4j:outputPanel id="imageSliderDescribe" layout="block" >-->

            <!--</a4j:outputPanel>-->
        </rich:panel>
    </h:panelGrid>

</ui:component>


</html>
